<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 50px;
        }
    </style>
</head>
<body>
    <input type="button" id="play" value="播放">
    <input type="button" id="stop" value="停止">
    <input type="button" id="reverse" value="反向动画">
    <div id="div1"></div>
    <script src="js/src/jquery-3.2.1.min.js"></script>
    <script src="js/src/TweenMax.min.js"></script>
    <script>
        $(function () {
            //得到动画的实例
            var t = new TimelineMax();
            /*
            * stop():停止动画
            * play():开始动画
            * reverse():反向动画开始
            * onComplete():运动结束后触发对应的函数
            * onReverseComplete():反向运动结束后触发对应的函数
            * */
            t.to( '#div1', 1, {left:'300',onComplete:function () {
                alert('left:300')
            },onReverseComplete:function () {
                alert('反向为0')
            }} );
            t.to( '#div1', 2, {width:'300'} );
            t.to( '#div1', 2, {height:'300'} );
            t.to( '#div1', 2, {rotationZ:'180'} );
            t.to( '#div1', 2, {opacity:'0'} );

            t.stop();

            $('#play').click(function () {
                t.play();
            });
            $('#stop').click(function () {
                t.stop();
            })
            $('#reverse').click(function () {
                t.reverse();
            })


        })
    </script>
</body>
</html>
